<template>
    <div class="uploader">
        <template v-if="imgList && imgList.length">
            <div class="img" :style="{width, height}" v-for="(i, idx) in imgList" :key="idx" @click="changeImg">
                <image :src="i" mode="aspectFill" />
                <i v-if="limit > 1" @click.stop="deleteImgItem(i, idx)" class="icon-close"></i>
                <div v-else class="mask">
                    <i class="icon-camera1"></i>
                </div>
            </div>
        </template>
        <div v-if="imgList.length < limitNum" class="upload" :style="{width, height}" @click="chooseImg">
            <i class="icon-camera1"></i>
            <p>{{upDes}}</p>
        </div>

        <!-- <uni-popup ref="cropperPopup" type="center">
            <div class="cropper_poupu">

            </div>
        </uni-popup> -->
    </div>
</template>

<script>
import apiList from '@/request/apiList'
export default {
    props: {
        upDes: {
            type: String,
            default: '上传图片'
        },
        limit: {
            type: Number || String,
            default: 1
        },
        value: {
            type: [Array, String],
            default: ''
        },
        width: {
            type: String,
            default: '180rpx'
        },
        height: {
            type: String,
            default: '180rpx'
        }
    },
    data() {
        return {
            imgList: []
        }
    },
    computed: {
        limitNum() {
            return +this.limit
        }
    },
    watch: {
        value(val) {
            this.initImgList()
        },
        imgList(val){
            console.log(val, 'dddddddd');
            if(typeof this.value == 'string') {
                this.$emit('input', val[0] || '')
            } else {
                this.$emit('input', val)
            }
        }
    },
    mounted() {
        this.initImgList()
    },
    methods: {
        initImgList() {            
            if(typeof this.value == 'string') {
                this.imgList = this.value ? [this.value] : []
            } else {
                this.imgList = this.value
            }
        },
        deleteImgItem(i, idx) {
            this.imgList.splice(idx, 1)
            console.log(this.imgList);
        },
        changeImg() {
            if(this.limit == 1) {
                this.chooseImg()
            }  
        },
        chooseImg() {
            uni.chooseImage({
                success: async (chooseImageRes) => {
                    const tempFilePaths = chooseImageRes.tempFilePaths;
                    uni.showLoading({ mask: true })
                    console.log(tempFilePaths[0], 'ddddddd3333');
                    // this.$refs.cropperPopup.open()
                    for(let i = 0; i < tempFilePaths.length; i++) {
                        await this.uploadImg(tempFilePaths[i])
                    }
                }
            });
        },
        uploadImg(tempFile) {
            return new Promise((resolve, reject) => {
                uni.uploadFile({
                    url: apiList.baseUrl + apiList.base.uploadFile, //仅为示例，非真实的接口地址
                    filePath: tempFile,
                    name: 'file',
                    formData: {
                        fileType: 'img',
                        fileName: 'file',
                        token: this.$store.state.user.account.token,
                    },
                    success: res => {
                        res = JSON.parse(res.data)
                        if(res.code == 1) {
                            if(this.limit == 1) {
                                this.imgList = [res.data.url]
                            } else {
                                this.imgList.push(res.data.url)
                            }
                        } else {
                            this.$interact.toast(res.msg)
                        }
                        resolve()
                    },
                    fail(err) {
                        this.$interact.toast('未知错误')
                        reject()
                    },
                    complete() {
                        uni.hideLoading()
                    }
                });
                
            })
        }
    }

}
</script>

<style lang="less" scoped>

.uploader{
    // width: 180rpx;
    // height: 180rpx;
    // width: 100%;
    // height: 100%;
    // margin-right: 20rpx;
    display: flex;
    flex-wrap: wrap;
    .upload{
        // margin-bottom: 10rpx;
        flex-shrink: 0;
        width: 180rpx;
        height: 180rpx;
        border-radius: 20rpx;
        background: #ddd;
        .align(center, column);
        i{
            color: #fff;
            font-size: 40rpx;
        }
        p{
            color: #fff;
            font-size: 28rpx;
            margin-top: 10rpx;
        }
    }
    .img{
        flex-shrink: 0;
        width: 180rpx;
        height: 180rpx;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        position: relative;
        border-radius: 20rpx;
        overflow: hidden;

        &:last-child{
            margin: 0;
        }

        >i {
            width: 50rpx;
            height: 50rpx;
            line-height: 50rpx;
            border-radius: 50%;
            font-size: 22rpx;
            color: red;
            background: rgba(255, 255, 255, 0.7);
            .align(center);
            position: absolute;
            top: 5rpx;
            right: 5rpx;
        }
        image{
            border-radius: 20rpx;
            width: 100%;
            height: 100%;
        }
    }
}
.cropper_poupu{
    width: 100vh;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}

.mask{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    i{
        font-size: 60rpx;
        color: #eee;
    }

}

</style>